<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=data-transform-sort-bar
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>6.OD客流数据分析</title>
    <link rel="stylesheet" href="../../static/css/navigationcss/reset.min.css">
    <link rel="stylesheet" href="../../static/css/navigationcss/style.css">
    <link rel="stylesheet" href="../../static/css/index.css"/>
</head>
<body style="height: 100%; margin: 0">
<header>
    <div class="left nav">
        <ul>
            <li><i class="nav_1"></i><a href={% url 'index' %}>数据概览</a> </li>
            <li><i class="nav_2"></i><a href={% url 'one' %}>各省市汽车总数</a></li>
            <li><i class="nav_3"></i><a href={% url 'two' %}>各省市碳排放量</a></li>
            <li><i class="nav_7"></i><a href={% url 'three' %}>各省市车类型</a></li>
            <li><i class="nav_9"></i><a href={% url 'four' %}>各省市绿化面积</a></li>
            <li class="nav_active"><i class="nav_2"></i><a href={% url 'five' %}>各省市工厂数量</a></li>
        </ul>
    </div>

    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =


                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>

</header>

<script type="text/javascript" src="../../static/js/flexible.js"></script>
<script type="text/javascript" src="../../static/js/echarts.min.js"></script>
<!-- 先引入jquery -->
<script type="text/javascript" src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>


<script src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="../../static/js/birthday.js"></script>

<div style="height: 10%;position:relative;text-align:center;">
    <ul class="hList" style="padding-left: 150px">
        <li>
            <a href="#click" class="menu liItem" id="河南省">
                <h2 class="menu-title menu-title">河南省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

        <li>
            <a href="#click" class="menu liItem" id="北京市">
                <h2 class="menu-title menu-title_2nd">北京市</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

        <li>
            <a href="#click" class="menu liItem" id="福建省">
                <h2 class="menu-title menu-title_3rd">福建省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>


        <li>
            <a href="#click" class="menu liItem" id="安徽省">
                <h2 class="menu-title menu-title_4th">安徽省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>
        <li>
            <a href="#click" class="menu liItem" id="甘肃省">
                <h2 class="menu-title menu-title_5th">甘肃省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

        <li>
            <a href="#click" class="menu liItem" id="广西省">
                <h2 class="menu-title menu-title_6th">广西省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>


        <li>
            <a href="#click" class="menu liItem" id="浙江省">
                <h2 class="menu-title menu-title_8th">浙江省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>
        <li>
            <a href="#click" class="menu liItem" id="黑龙江省">
                <h2 class="menu-title menu-title_9th">黑龙江省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>
    </ul>


</div>

<section class="mainbox">
    <div class="column">
        <div class="map">
            <div class="chart" id="container" style="height: 90%"></div>
        </div>
    </div>
</section>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    function ajax(cityName) {

        $.getJSON("{% url 'showFive' %}", {cityName: cityName}, function (rawData) {
            console.log("ajax执行了一次getJson");
            var list = rawData.data.map(function (entry) {
                return [entry.year, entry.num];
            });
            console.log(list)
            {#测试，showThree_new.json中是测试例子#}
            if (typeof (cityName) == "undefined") {
                cityName = '30个省市'
            }
            console.log(cityName)

            option = {
                title: {
                    left: 'center',
                    text: cityName + '近几年工厂总数变化(单位:家)',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                dataset:
                    [{
                        dimensions: ['year', 'num'],
                        source: list
                    }],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        {#data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],#}
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '工厂数量',
                        type: 'bar',
                        barWidth: '50%',
                        encode: {x: 'year', y: 'num'},
                        label: {
                            normal: {
                                show: true,
                                {#rotate: 90,#}
                                position: 'top',
                                color: '#fff'
                            }
                        }
                        {#data: [10, 52, 200, 334, 390, 330, 220]#}
                    }
                ]
            };


            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        });
    }

    ajax();
    $(".liItem").click(function () {
        console.log("点击了一次liItem!");
        var cityName = $(this).attr('id');
        console.log(cityName)
        ajax(cityName);
        {#return false 防止出现两次请求#}
        return false;

    });


</script>
</body>
</html>
